<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Triangle Puzzle</title>  
<style>  
  canvas {  
    /* border: 1px solid black;   */
    /* background-color: #f4f4f4;   */
  }  
  #triangle1, #triangle2 {  
    position: absolute;  
  }  
  #formula {  
    margin-top: 200px;  
  }  
</style>  
</head>  
<body>  
  
    <canvas id="triangle3060" width="200" height="100"></canvas>  
    <canvas id="triangle4545" width="200" height="200" style="margin-top: 20px;"></canvas>
  
<input type="text" id="formula" readonly>  
<button onclick="validateFormula()">检验</button>  
  
<script>  
function drawTriangle(canvasId, angle1, angle2) {  
  const canvas = document.getElementById(canvasId);  
  const ctx = canvas.getContext('2d');  
  
  // 计算三角形的边长  
  const sideOpposite = 50; // 对边长度  
  const sideAdjacent = sideOpposite * Math.tan(angle1 * Math.PI / 180); // 邻边长度  
  const sideHypotenuse = sideOpposite / Math.sin(angle1 * Math.PI / 180); // 斜边长度  
  
  // 绘制三角形  
  ctx.beginPath();  
  ctx.moveTo(0, sideOpposite); // 起点在顶部  
  ctx.lineTo(sideAdjacent, 0); // 第一个点在左边  
  ctx.lineTo(0, 0); // 第二个点在原点  
  ctx.closePath();  
  ctx.stroke();  
  
  // 标记角度（可选）  
  ctx.font = '16px Arial';  
  ctx.fillStyle = 'black';  
//   ctx.fillText(angle1 + '°', 10, 20);  
//   ctx.fillText(angle2 + '°', sideAdjacent - 10, 20);  
//   ctx.fillText('90°', sideAdjacent / 2, sideOpposite + 10);  
}  
  
// 绘制30°-60°-90°三角形  
drawTriangle('triangle3060', 30, 60);  
  
// 绘制45°-45°-90°三角形  
drawTriangle('triangle4545', 45, 45);  
</script>  
  
</body>  
</html>